<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 500px;
            margin: 50px auto;
        }
        .box1 .title{
            display: flex;
            background-color: #eaeaea;
        }
        .box1 .title span{
            line-height: 50px;
            width: 100%;
            text-align: center;
        }
        .box1 .title .active{
            background-color: red;
            color: #fff;
            font-size: 20px;
            font-weight: bold;
        }
        .box1 .context{
            display: flex;
            border: 1px solid #000;
            height: 300px;
        }
        .box1 .context p{
            width: 100%;
            text-align: center;
            line-height: 300px;
        }
        /* 分界线 */
        .box2{
            width: 500px;
            margin: 0 auto;
        }
        .box2 .title{
            display: flex;
            background-color: #eaeaea;
        }
        .box2 .title span{
            line-height: 50px;
            width: 100%;
            text-align: center;
        }
        .box2 .title .active{
            background-color: red;
            color: #fff;
            font-size: 20px;
            font-weight: bold;
        }
        .box2 .context{
            display: flex;
            border: 1px solid #000;
            height: 300px;
        }
        .box2 .context p{
            width: 100%;
            text-align: center;
            line-height: 300px;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>
<script>


let data1 = [
        {
            name:'手机',
            list:[
                '苹果',
                '华为',
                'oppo'
            ]
        },
        {
            name:'电脑',
            list:[
                '苹果',
                '联想',
                '外星人'
            ]
        },
        {
            name:'空调',
            list:[
                '格力',
                '美的',
                '长虹'
            ]
        },
    ]
    let data2 = [
        {
            name:'飞机',
            list:[
                '客机',
                '战斗机',
                '私人飞机'
            ]
        },
        {
            name:'火车',
            list:[
                '动车',
                '高铁',
                '私人铁路'
            ]
        },
        {
            name:'大炮',
            list:[
                '意大利炮',
                '中国炮',
                '美国炮'
            ]
        },
        {
            name:'手雷',
            list:[
                '普通手雷',
                '高爆手雷',
                '地雷'
            ]
        },
        {
            name:'变身器',
            list:[
                '迪迦',
                '假面骑士',
                '刑天铠甲'
            ]
        },
        {
            name:'小混混',
            list:[
                '小张',
                '大张',
                '老张'
            ]
        },
    ]

    class Ka{
        constructor(el,data){
            console.log(el);
            this.el = el; // 传一个最大的父级盒子
            this.data = data;
            this.nav() // 创建导航标签
            this.footer() // 创建内容标签
            this.randerNav()    // 创建导航内容标签
            this.randerText(0)  // 创建内容标签内容
            this.click()     // 点击事件方法
            this.clear(0)  // 设置高亮
        }
        nav(){  
            let div = document.createElement('div')
            div.className = 'title'
            this.el.appendChild(div)
        }
        footer(){
            let div = document.createElement('div')
            div.className = 'context'
            this.el.appendChild(div)
        }
        randerNav(){
            let str = this.data.map((item,i) =>{
                return `<span index="${i}">${item.name}</span>`
            }).join('')
            this.el.querySelector('.title').innerHTML = str ;
        }
        randerText(i){
            let text = this.data[i].list.map(item =>{
                return `<p>${item}</p>`
            }).join('')
            this.el.querySelector('.context').innerHTML = text;
        }
        click(){
            let that = this;
            
            this.el.querySelector('.title').onclick =function(e){
                if(e.target.nodeName === 'SPAN'){
                    that.randerText(e.target.getAttribute('index'))
                    that.clear(e.target.getAttribute('index'))
                }
            }
        }
        clear(i){
            let sps  = [...this.el.querySelectorAll('.title span')]
            sps.forEach(item => item.classList.remove('active'))
            sps[i].classList.add('active')
        }
       
    }



    class Zi extends Ka{
        constructor(el,data){
            super(el,data)
        }
        randerText(i){
            let text = this.data[i].list.map(item =>{
                return `<p>${item}</p>`
            }).join('')
            this.el.querySelector('.context').innerHTML = text;
        }
    }
    new Ka(document.querySelector('.box1'),data1)

    new Zi(document.querySelector('.box2'),data2)

</script>